<style lang="scss" scoped>
  .custom-price {
    background-color: #CE393D;
    padding: 0 1.5rem;
    overflow: hidden;
    button {
      padding: 0;
      &:focus {
        outline: 0;
      }
    }
    .caption {
      text-align: center;
      font-size: 1.6rem;
      color: #EECC8F;
      font-weight: bold;
    }
    .price-control {
      margin: 3rem 1.5rem;
      background-color: #fff;
      border-radius: 5px;
      overflow: hidden;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      input {
        border: 0;
        font-size: 1.4rem;
        padding: 1.4rem 1.2rem;
        width: 80%;
        text-align: center;
        &:focus {
          outline: 0;
        }
      }
      button {
        width: 20%;
        border: 0;
        border-left: 1px solid #C6C292;
        font-size: 1.6rem;
        color: #C6C292;
        background: none;
        white-space: nowrap;
      }
    }
    .divider {
      margin: 3rem 1.5rem;
      span {
        display: inline-block;
        vertical-align: middle;
      }
      .left-line {
        width: 35%;
        height: 2px;
        background-image: linear-gradient(to left, #D9836A, #CE393D);
      }
      .right-line {
        width: 35%;
        height: 2px;
        background-image: linear-gradient(to right, #D9836A, #CE393D);
      }
      .divider-pic {
        width: 30%;
        padding: 0 1rem;
        img {
          display: block;
          width: 100%;
        }
      }
    }
    .price-btn {
      width: calc(100% - 3rem);
      font-size: 1.6rem;
      padding: 1rem;
      border: 0;
      background-color: #EECC8F;
      color: #513E3A;
      border-radius: 5px;
      margin: 0 1.5rem 2.5rem;
    }
    .price-intro-hd {
      background-repeat: no-repeat;
      font-size: 1.6rem;
      padding: 1rem;
      text-align: center;
      color: #F8B1AB;
      background-size: contain;
      background-position: center;
      margin: 0 1.5rem 2rem;
    }
    .price-intro-bd {
      margin-bottom: 2.5rem;
      border-radius: 5px;
      padding: 1rem;
      &.red-bg {
        background-color: #BE2F33;
        p {
          margin: 0;
          font-size: 1.4rem;
          line-height: 1.5;
        }
      }
      &.white-bg {
        background-color: #fff;
        .title {
          display: inline-block;
          vertical-align: middle;
          background-repeat: no-repeat;
          background-size: auto 80%;
          background-position: 0 center;
          font-size: 1.4rem;
          padding: 1rem 0 1rem 5rem;
        }
        .pic {
          margin: 1.5rem 0;
          display: block;
          width: 100%;
        }
      }
    }
  }
</style>
<template>
  <div class="custom-price">
    <p class="caption">自定义商品价格</p>
    <div class="price-control">
      <input type="number" v-model="price"
             placeholder="输入自定义价格: 0.01-20元"
             @input="checkInput($event)" debounce="400"><button type="button"
                                                                @click="payByAlicharge()">确定
    </button>
    </div>
    <div class="divider">
      <span class="left-line"></span><span class="divider-pic">
        <img src="../../static/img/divider-pic.png" alt="">
      </span><span class="right-line"></span>
    </div>
    <button type="button" class="price-btn" @click="getAlipay()">领取支付宝红包
    </button>
    <button type="button" class="price-btn" @click="payByAlicharge()">
      余额宝支付</button>
    <button type="button" class="price-btn" @click="withdraw()">支付完成红包提现
    </button>

    <div class="price-intro-hd" style="background-image:
    url('./static/img/intro-hd.png')">
      支付宝提现流程</div>
    <div class="price-intro-bd red-bg">
      <p>1、先点击领取支付宝红包按钮进入支付宝领取红包；</p>
      <p>2、在输入框里自定义大于领取的红包金额；</p>
      <p>3、再点击余额宝支付按钮，去支付宝选择余额宝支付；</p>
      <p>4、支付完成后，去支付宝订单里截图支付订单；</p>
      <p>5、最后点“支付完成红包提现”进入支付宝客服提现。</p>
      <p>6、由于红包提现我们平台要付给支付宝2%的费用，所以这个费用将在提现成功后扣除哦；</p>
      <p>7、此服务最终解释权归小树林APP所有。</p>
    </div>

    <div class="price-intro-hd" style="background-image:
    url('./static/img/intro-hd.png')">支付宝消费红包使用引导</div>
    <div class="price-intro-bd white-bg">
      <div class="title"
           style="background-image: url('./static/img/intro-title-1.png')">使用红包时,
        余额宝里的金额需大于消费金额</div>
      <img class="pic" src="../../static/img/intro-pic-1.png" alt="">
      <div class="title" style="background-image:
      url('./static/img/intro-title-2.png')">在线下实体店付款, 信用卡还款,
        淘宝购买商品时即可使用红包</div>
      <img class="pic" src="../../static/img/intro-pic-2.png" alt="">
    </div>
  </div>
</template>
<script>
  import _ from 'lodash'
  import webviewJavascriptBridge from '../assets/utils/webviewJavascriptBridge.js'
  import userAgent from '../assets/utils/userAgent.js'
  import Uid from '../assets/utils/uid.js'
  // import api from '../assets/utils/api.js'
  export default {
    data () {
      return {
        uid: '1',
        osType: '',
        price: '',
        version: null,
        uidtoken: null
      }
    },
    watch: {
      price (val) {
        console.log(val)
      }
    },
    methods: {
      getAlipay () {
        // window.alert(_.isNil(this.uidtoken))
        if (this.uidtoken === 'undefined') {
          window.alert('老版本暂不支持点击跳转到支付宝，请支付完成后添加我们的小树林支付宝客服：18621174664领取现金。')
          return false
        }
        window.location.href = 'http://mp.weixin.qq.com/s/*4**zhifubaokefu8Gz1q627kC*4**'
      },
      withdraw () {
        if (this.uidtoken === 'undefined') {
          window.alert('老版本暂不支持点击跳转到支付宝，请支付完成后添加我们的小树林支付宝客服：18621174664领取现金。')
          return false
        }
        window.location.href = 'http://mp.weixin.qq.com/s/*4**zhifubaokefu01MmLE56xb*4**'
      },
      checkInput (e) {
        let val = e.target.value
        const valNum = Number(val)
        if (!isFinite(valNum)) {
          e.target.value = ''
          return
        }
        if (val.indexOf('.') > -1 && val.split('.')[1].length > 2) {
          val = val.split('.')[0] + '.' + val.split('.')[1].slice(0, 2)
          e.target.value = val
        }
      },
      payByAlicharge () {
        const vm = this
        const price = Number(vm.price)
        if (price < 0.01 || price > 20) {
          window.alert('价格必须是0.01~20元之间.')
          vm.price = ''
          return
        }
        window.vipbanlvPayCallback = (data) => {
          if (_.isString(data)) {
            data = _.attempt(JSON.parse.bind(null, data))
          }
          if (data.orderId) {
            if (this.uidtoken === 'undefined') {
              window.alert('老版本暂不支持点击跳转到支付宝，请支付完成后添加我们的小树林支付宝客服：18621174664领取现金。')
              return
            }
            window.alert('点击确定会打开您的支付宝，我们的小树林支付宝客服会把红包钱给你')
            window.location.href = 'http://mp.weixin.qq.com/s/*4**zhifubaokefu01MmLE56xb*4**'
          }
        }

        const orderId = vm.getOrderId()
        if (this.osType === 'ios') {
          webviewJavascriptBridge.init(bridge => {
            // web -> ios
            bridge.callHandler('vipbanlvPayCall', {
              'orderId': orderId,
              'price': price,
              'title': '试用商品'
            }, response => {
              console.log('JS got response', response)
            })

            // ios -> web
            bridge.registerHandler('vipbanlvPayCallback', window.vipbanlvPayCallback)
          })
        } else if (this.osType === 'android') {
          if (_.isObject(window.vipbanlvFunc)) {
            window.vipbanlvFunc.vipbanlvPayCall(`{"orderId": ${orderId}, "price": ${price}, "title": "试用商品"}`)
          }
        }
      },
      getOrderId () {
        const now = new Date()
        const year = now.getFullYear().toString()
        let month = _((now.getMonth() + 1).toString()).padStart(2, '0')
        let day = _(now.getDate().toString()).padStart(2, '0')
        let hours = _(now.getHours().toString()).padStart(2, '0')
        let minutes = _(now.getMinutes().toString()).padStart(2, '0')
        let seconds = _(now.getSeconds().toString()).padStart(2, '0')
        let milliseconds =
          _(now.getMilliseconds().toString()).padStart(4, '0')

        return year + month + day + hours + minutes + seconds + milliseconds
      }
    },
    created () {
      this.osType = userAgent.getOS()
      Uid.getUid().then(res => {
        this.uid = res.uid
        this.version = res.version
        this.uidtoken = res.uidtoken
      })
    }
  }
</script>
